<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv= "X-UA-Compatible" content = "IE=edge,chrome=1" />
    <title>博艺网-${user.getCnName()}的店铺</title>
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='http://m.sui.taobao.org/assets/js/zepto.js' charset='utf-8'></script>
    <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/??sm.min.css,sm-extend.min.css">
    <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/??sm.min.js,sm-extend.min.js' charset='utf-8'></script>
    <script type="text/javascript" src="/common/js/jquery-1.8.2.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/flatpickr/dist/flatpickr.min.css">
    <script src="https://unpkg.com/flatpickr"></script>
    <script src="https://npmcdn.com/flatpickr/dist/l10n/zh.js"></script>

    <style>
        .redClass {
            background-color: #e11122 !important;
            color: #f1f1f1;
        }
        .greenClass {
            background-color: #38b44a !important;
            color: #f1f1f1;
        }
        .greyClass {
            background-color: darkgrey !important;
            color: #f1f1f1;
        }
        .orangeClass {
            background-color: orange !important;
        }
        .flatpickr-calendar{
            width: 100%;
        }
        .flatpickr-rContainer{
            margin: 0 auto;
        }
        /*.flatpickr-days{*/
            /*width: 100%;*/
        /*}*/
        .flatpickr-weeks{
            width: 100%;
        }
    </style>

    <script type="text/javascript">
        var dates = {
                    20170405: 3,
                    20170406: 0,
                    20170408: 3,
                },
                classDict = {
                    0: 'redClass',
                    1: 'greenClass',
                    3: 'greyClass'
                };

        // Better always use a two digit format in your dates obj
        function get2DigitFmt(val) {
            return ('0' + val).slice(-2);
        }

        // onDayCreate event, add class to day if date has a class
        //        flatpickr("#myId", {
        //            onDayCreate: function(dObj, dStr, fp, dayElem) {
        //                var date = dayElem.dateObj,
        //                        // Note the + 1 in the month.
        //                        key = date.getFullYear() + get2DigitFmt(date.getMonth() + 1) + get2DigitFmt(date.getDate()),
        //                        value = classDict[dates[key]];
        //                if (value) {
        //                    dayElem.className += ' ' + value;
        //                }
        //            }
        //        });
    </script>
</head>
<body>

<div class="content">
    <div class="card-content"><img src="http://img.boyitongcheng.com/${user.getAvatar()!''}" width="100%"></div>
    <div class="card" style="margin: 0px;">
        <div class="card-footer">
            <span>商家名:</span>
            <span>${user.getCnName()!''}</span>
        </div>
    </div>
    <div class="card facebook-card" style="margin: 0px;">

        <div class="card-footer no-border">
            <a href="#" class="link"><#if user.getBizDealCount()??>${user.getBizDealCount()}<#else>0</#if></a>
            <a href="#" class="link"><#if user.getBizCommentCount()??>${user.getBizCommentCount()}<#else>0</#if></a>
            <a href="#" class="link"><#if user.getBizStar()??>${user.getBizStar()}<#else>0%</#if></a>
        </div>
        <div class="card-footer no-border">
            <a href="#" class="link">预定量</a>
            <a href="#" class="link">评论数</a>
            <a href="#" class="link">好评率</a>
        </div>
    </div>

    <div class="card" style="margin: 0px;margin-top: 5px;">
        <div class="card-footer">
            <span>职业:</span>
            <span>${channel.getName()!''}</span>
        </div>
        <div class="card-footer">
            <span>所在城市:</span>
            <span>${user.getCity()!''}</span>
        </div>
        <div class="card-footer">
            <span>信誉:</span>
            <span>
            <#if creditData??>
            ${creditData}
            <#else >
                <div style="clear: both;height: 1px;">&nbsp;</div>
            </#if>
            </span>
        </div>
        <div class="card-footer">
            <span>资质:</span>
            <span>
                <#if authList??>
                    <#list authList as auth>
                        <#if auth.authType == 1>
                            <img src="/common/icon/platform.png" width="20px" height="20px" title="平台认证"/>
                        <#elseif auth.authType == 2>
                            <img src="/common/icon/credit.png" width="20px" height="20px" title="诚信认证"/>
                        <#else>
                            <#if user.getUserType() == 3 >
                                <img src="/common/icon/college.png" width="20px" height="20px" title="学院认证-中级认证"/>
                            <#elseif user.getUserType() ==4 >
                                <img src="/common/icon/college_team.png" width="20px" height="20px" title="学院认证-一星团队"/>
                            </#if>
                        </#if>
                    </#list>
                </#if>
                </span>
        </div>
    </div>

    <div class="card" style="margin: 0px;">
        <div class="card-content">
            <div class="card-content-inner">${user.getDescn()!''}</div>
        </div>
    </div>

    <div class="card" style="margin: 0px;margin-top: 5px;">
        <div class="card-header">服务类型:</div>
        <#if productList??>
            <#list productList as product>
                <div class="card-footer">
                    <span>${product.getName()}</span>
                    <span style="color: #ff6537;">￥${product.getCurrentPrice()?string("0.00")}元</span>
                </div>
            </#list>
        </#if>
    </div>

    <div class="content-block-title">服务档期:</div>
    <div class="card" style="margin:0px;padding: 5px 0;">
        <div class="card-header">
            <div style="height: 12px;width: 12px;background-color: #e11122;float: left;margin-top: 3px;"></div><div style="float: left;">已订满</div>
            <div style="height: 12px;width: 12px;background-color: darkgrey;float: left;margin-left: 30px;margin-top: 3px;"></div><div style="float: left;">不接单</div>
        </div>
        <div id="myId" class="card-content">

        </div>
    </div>

    <div class="content-block-title">服务区域:</div>
    <div class="card" style="margin:0px;padding: 5px 0;">
        <div class="card-content">
            <ul>
                <li>
                <#if openProvinces??>
                    <#list openProvinces as openKey>
                    ${openKey}
                        <div>
                            <#assign subList = openCitiesMap[openKey?string]!>
                            <#list subList as subFunc>
                                <span>${subFunc?string}</span>
                            </#list>
                        </div>
                    </#list>
                </#if>
                </li>
            </ul>
        </div>
    </div>

    <div class="content-block-title">异地费说明:</div>
    <div class="card" style="margin: 0px;">
        <div class="card-content">
            <div class="card-content-inner">${user.getRemoteFee()!''}</div>
        </div>
    </div>
</div>

</body>

<script>
    $(function () {

        $("#myId").flatpickr({locale: "zh",inline: true,
            onDayCreate: function(dObj, dStr, fp, dayElem) {
            var date = dayElem.dateObj,
                    // Note the + 1 in the month.
                    key = date.getFullYear() + get2DigitFmt(date.getMonth() + 1) + get2DigitFmt(date.getDate()),
            <#if scheduleData??>
                    value = ${scheduleData}[key];
                if (value) {
                    dayElem.className += ' ' + value;
                }
            </#if>
            }
        });
    });
</script>
</html>